<template>
	<view class="page">
		<navBar :title="'待使用'" bg="#F1F1F1"></navBar>

		<view class="content">
			<view class="product flex_r_between">
				<view class="product-info flex_center">
					<view class="image">
						<image :src="info.image" mode="aspectFill"></image>
					</view>

					<view class="text hidden_2">
						{{ info.name }}
					</view>
				</view>

				<view class="price">
					￥{{ info.pay_price }}
				</view>
			</view>

			<view class="code flex_r_around">
				<image :src="info.base64_image" mode="aspectFill"></image>
			</view>

		</view>

		<view class="store">
			<view class="store-info flex_center">
				<view class="avatar">
					<image :src="info.store_avatar" mode="aspectFill"></image>
				</view>

				<view class="text">
					<view class="nickname flex_center">
						<text class="hidden">{{ info.store_name }}</text>
						<image :src="$util.prefix('store/id_card_icon.png')"></image>
					</view>

					<view class="time">
						营业时间 9:00-22:00
					</view>
				</view>
			</view>

			<view class="store-tags flex_center" v-if="info.tags">
				<view class="item flex_r_around" :id="`item${index+1}`" v-for="(item,index) in info.store_tags"
					:key="index">
					<text>{{ item }}</text>
				</view>
			</view>

			<view class="store-sign">
				{{ info.signature }}
			</view>

			<view class="store-address flex_center">
				<view class="left flex_center">
					<image :src="$util.prefix('public/icon_jiaxiang.png')"></image>
					<text class="hidden">{{ info.store_address }}</text>
				</view>

				<view class="right">距您{{ info.juli }}公里</view>
			</view>

		</view>
		
		<view class="order-sn flex_r_between">
			<view class="left">
				订单编号
			</view>
			
			<view class="right flex_center" @click="$util.onCopy(info.order_sn)">
				<text>{{ info.order_sn }}</text>
				<view>复制</view>
			</view>
		</view>
		
		<view class="btn-box flex_center">
			<view class="btn-item flex_r_around red" @click="buyAgain">
				<text>再来一单</text>
			</view>
			<view class="btn-item flex_r_around grey" v-if="info.status == 3 || info.status == 4" @click="$util.toUrl(`/pages/order/returnorder?order_id=${info.id}&store_id=${info.store_id}`)">
				<text>申请退款</text>
			</view>
		</view>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				info: {

				},
				
				lat: 0,
				lng: 0,
				order_id: 0,
			}
		},
		methods: {
			getDetail() {
				this.$get('/order/getOrderInfo', {
					order_id: this.order_id,
					lat: this.lat,
					lng: this.lng,
				}).then(res => {
					this.info = res.data;
					if (this.info.store_tags) {
						this.info.store_tags = this.info.store_tags.split(',');
					} else {
						this.info.store_tags = [];
					}
				});
			},
			
			buyAgain(){
				this.$util.toUrl(
					`/pages/create/create?goods_id=${this.info.goods_id}&provider_id=${this.info.provider_id}&store_id=${this.info.store_id}&popularize_id=${0}&kefu=${this.info.kefu}&circle_id=${this.info.circle_id}`
				);
			},
		},

		onLoad(option) {
			this.order_id = option.order_id || 0;
			this.lat = option.lat || 0;
			this.lng = option.lng || 0;
			this.getDetail();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background: #F1F1F1;
		min-height: 100vh;
		padding: 24rpx 24rpx 140rpx;
	}

	.content {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 32rpx;
		overflow: hidden;

		.product {
			overflow: hidden;

			.product-info {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
				overflow: hidden;

				.image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 12rpx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 128rpx;
						height: 128rpx;
					}
				}

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
					flex: 1;
					margin: 0 60rpx 0 20rpx;
				}

				.price {
					flex-shrink: 0;
					font-weight: 600;
					font-size: 28rpx;
					color: #131313;
				}
			}

		}

		.code {
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.code-sign {
			text {
				font-size: 24rpx;
				color: #131313;
				line-height: 34rpx;
			}

			view {
				font-size: 24rpx;
				color: #FD2A53;
				line-height: 34rpx;
				padding: 0 8rpx;
			}
		}
	}

	.store {
		margin: 20rpx 0;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;

		.store-info {
			overflow: hidden;
			padding: 32rpx 32rpx 20rpx;

			.avatar {
				width: 112rpx;
				height: 112rpx;
				background: #D8D8D8;
				border-radius: 72rpx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 24rpx;

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}

			.text {
				flex: 1;
				overflow: hidden;

				.nickname {
					overflow: hidden;

					text {
						font-weight: 600;
						font-size: 40rpx;
						color: #131313;
						line-height: 56rpx;
						max-width: 300rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 8rpx;
					}
				}

				.time {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
					margin-top: 8rpx;
				}
			}
		}

		.store-sign {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			margin: 24rpx 0;
			padding: 0 32rpx 24rpx;
		}

		.store-tags {
			margin: 0 32rpx;
			flex-wrap: wrap;

			.item {
				flex-shrink: 0;
				border-radius: 8rpx;
				padding: 4rpx 24rpx;
				border: 2rpx solid #FF6D6D;
				margin-right: 12rpx;
				margin-bottom: 12rpx;

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #FF6D6D;
				}
			}

			#item1 {
				border: 2rpx solid #FF6D6D;

				text {
					color: #FF6D6D;
				}
			}

			#item2 {
				border: 2rpx solid #459BFD;

				text {
					color: #459BFD;
				}
			}

			#item3 {
				border: 2rpx solid #DDA103;

				text {
					color: #DDA103;
				}
			}

			#item4 {
				border: 2rpx solid #AA78FF;

				text {
					color: #AA78FF;
				}
			}
		}

		.store-address {
			overflow: hidden;
			border-top: 2rpx solid #F1F1F1;
			padding: 24rpx 0;
			margin: 0 32rpx;

			.left {
				flex: 1;
				overflow: hidden;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				text {
					flex: 1;
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
				}
			}

			.right {
				font-size: 24rpx;
				color: #666666;
			}
		}

	}

	.order-sn {
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 0 32rpx;
		
		.left {
			font-size: 24rpx;
			color: #666666;
		}
		
		.right {
			text {
				font-size: 24rpx;
				color: #131313;
			}
			
			view {
				font-size: 24rpx;
				color: #FD2A53;
				margin-left: 16rpx;
			}
		}
	}

	.btn-box {
		width: 100vw;
		height: 130rpx;
		padding: 0 32rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx #FFFFFF, 0rpx -2rpx 0rpx 0rpx #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		flex-direction: row-reverse;
		
		.btn-item {
			width: 224rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin-left: 24rpx;
			
			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
		.red {
			background: #FD2A53;
			text {
				color: #FFFFFF;
			}
		}
		
		.grey {
			background: #FFFFFF;
			border: 2rpx solid #CCCCCC;
			text {
				color: #131313;
			}
		}
	}

</style>